<template>
  <ul style="padding-top: 5px; padding-left: 2px">
    <li v-for="(file, index) in files" :key="index" class="item">
      <el-checkbox v-model="file.checked" @change="$emit('change')">
        <span class="name">{{ file.filename }}</span>
      </el-checkbox>
    </li>
  </ul>
</template>

<script>
/**
 *
 *  Copyright 2019 The FATE Authors. All Rights Reserved.
 *
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 *
 */

export default {
  props: {
    files: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/common/color';

.item {
	margin-bottom: 10px;
}

.name {
	color: $gray;
	font-size: 14px;
	font-weight: 500;
}
</style>
